<template>
	<view class="hot">
		<view class="hottitle">热搜榜</view>
		<view class="list">
			<view class="list_item" v-for="(item,index) in hot" :key="index" @click="into(item.searchWord)">
				<!--  #ifdef  MP-WEIXIN-->
				<text class="index">{{index + 1}}</text>
				<!--  #endif -->
				<!--  #ifndef  MP-WEIXIN-->
				<text class="index" :class="{red:typeof isred === typeof item.iconUrl}">{{index + 1}}</text>
				<!--  #endif -->
				<view class="center">
					<!--  #ifdef  MP-WEIXIN-->
					<view class="geming">{{item.searchWord}}</view>
					<!--  #endif -->
					<!--  #ifndef  MP-WEIXIN-->
					<view class="geming" :class="{wenzi:typeof iswenzi === typeof item.iconUrl}">{{item.searchWord}}</view>
					<!--  #endif -->
					<view class="jieshao">{{item.content}}</view>
				</view>
				<text class="redu">{{item.score}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {detail} from '../../api/SouSuo/SouSuo.js'
	export default {
		created() {
			detail().then(res => {
				this.hot = res.data
			})
		},
		data() {
			return {
				hot:[],
				isred:'',
				iswenzi:''
			}
		},
		methods:{
			into(searchWord){
				this.$emit('into',searchWord)
			}
		}
	}
</script>

<style lang="scss">
	.hot{
		width: 100%;
		margin-top: 40rpx;
		.hottitle{
			width: 90%;
			height: 20px;
			margin: auto;    
			font-size: 32rpx;
		}
		.list{
			width: 100%;
			margin-top: 20rpx;
			.list_item{
				margin-bottom: 40rpx;
				margin-left: 45rpx;
				margin-right: 45rpx;
				height: 100rpx;
				//background-color: pink;
				width: 88%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.index{
					//background-color: red;
					font-size: 40rpx;
					margin-right: 20rpx;
					margin-bottom: 52rpx;
				}
				.red{
					color: red;
					font-weight: 800;
				}
				.center{
					width: 444rpx;
					height: 100%;
					//background-color: green;
					.geming{
						font-size: 32rpx;
					}
					.wenzi{
						font-weight: 800;
					}
					.jieshao{
						color: #8a8a8a;
						font-size: 28rpx;
						margin-top: 16rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-break: normal;    
					}
				}
				.redu{
					color: #8a8a8a;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
